<template>
    <div class="AboutUsMain" v-if="content.length">
          <div class="AboutUsTop">
                <img src="../../assets/ceii.png" alt="">
                <p class="title">{{content[3].value}}</p>
                <div class="introduce">{{content[4].value}}</div>
            </div>
            <div class="AboutUsCenter">
                <p class="title">{{content[2].remark}}</p>
                <p class="centent">{{content[2].value}}</p>
                <p class="title">{{content[1].remark}}</p>
                <p class="moreCentent">
                    <span>{{JSON.parse(content[1].value).tel}}</span>
                    <span class="website">{{JSON.parse(content[1].value).email}}</span>
                </p>
                <p class="title">{{content[0].remark}}</p>
                <p class="centent">{{content[0].value}}</p>
            </div>
            <div class="AboutUsBottom">
                <span class="centent" :class="{'pitchColor':judgeAgreement}" @click="agreement" style="border-right:.02rem solid #999;">{{content[7].remark}}</span>
                <span class="centent" :class="{'pitchColor':judgePrivacy}" @click="privacy">{{content[6].remark}}</span>
            </div>
            <div v-html="data" style="padding: 0 .4rem;"></div>
    </div>
</template>
<script>
import apiPolicy from '../../api/loginPolicy'
export default {
  data(){
      return{
          data:'',
          content: [],
          judgeAgreement: false,
          judgePrivacy: false
      }
  },
  mounted(){
      this.getAboutUs()
  },
  methods:{
      // 获取关于我们的详情
      getAboutUs () {
        apiPolicy.AboutUs().then(res => {
            this.content = res.data.data
        })
      },
      // 隐私政策
      privacy(){
          apiPolicy.privacy().then(data => {
              this.data = data.body.data.value
              this.judgeAgreement = false
              this.judgePrivacy = true
          })
      },
      // 用户协议
      agreement(){
          apiPolicy.agreement().then(data => {
              this.data = data.body.data.value
              this.judgeAgreement = true
              this.judgePrivacy = false
          })
      },
  }
}
</script>
<style scoped>
    .AboutUsTop .title {
        font-size: 20px;
        font-weight:bold;
        color:#434343;
        margin-top: .2rem;
        text-align: center;
    }
    .AboutUsTop{
        overflow: auto;
        padding: 0 .4rem .4rem .4rem;
        border-bottom:.1rem solid #F3F3F3;
        border-top:.02rem solid #F3F3F3;
    }
    .AboutUsTop img{
        display: block;
        width: 1rem;
        margin-left: 50%;
        transform: translateX(-50%);
        padding-top: .5rem;
    }
    .introduce{
        margin-top: .3rem;
        color:#434343;
        font-size: 16px;
        line-height: 20px;
    }
    .AboutUsCenter{
        padding: 0 .4rem .4rem .4rem;
        border-bottom:.1rem solid #F3F3F3;
        padding-bottom: .4rem;
    }
    .AboutUsCenter .title{
        color:#434343;
        margin: .2rem 0;
        font-size: 16px;
    }
    .AboutUsCenter .centent {
        border: .02rem solid #999;
        border-radius: .1rem;
        text-align: center;
        font-size: 16px;
        padding: .21rem 0;
        color:#434343;
    }
    .AboutUsCenter span{
        line-height: 41px;
        display: block;
        font-size: 16px;
        
    }
    .AboutUsCenter span.website {
        border-top: .02rem solid #999;
        font-size: 20px;
    }
    .AboutUsCenter .moreCentent {
        border: .02rem solid #999;
        border-radius: .1rem;
    }
    .AboutUsCenter .moreCentent span {
        text-align: center;
        color:#434343;
    }
    .AboutUsBottom{
        margin: 35px .4rem 70px .4rem;
        border-radius: .1rem;
        box-sizing: border-box;
        border: .02rem solid #999;
        font-size: 16px;
    }
    .AboutUsBottom .centent{
        text-align: center;
        box-sizing: border-box;
        display: inline-block;
        width: 49%;
        padding: .21rem 0;
        color: #7E7D7D;
        font-weight: bold;
    }
    .AboutUsBottom .pitchColor{
        color: #000;
    }
</style>
